/* stylelint-disable scss/dollar-variable-pattern */
// 主轴方向 属性值
$directionList: row, row-reverse, column, column-reverse, warp;

// 主轴对齐方式 属性值
$justifyContentList: flex-start, flex-end, center, space-between, space-around;

// 交叉轴对齐方式 属性值
$alignItemsList: flex-start, flex-end, center, baseline, stretch;

// 三层遍历，组合所有属性值
@each $direction in $directionList {
  // 简化一些属性值
  $dir: $direction;

  @if $direction == "row" {
    $dir: "x";
  }

  @if $direction == "column" {
    $dir: "y";
  }

  @if $direction == "warp" {
    .flex-#{$direction} {
      display: flex;
      flex-wrap: wrap;
    }
  }

  @each $justifyContent in $justifyContentList {
    // 简化一些属性值
    $JC: $justifyContent;

    @if $justifyContent == "flex-start" {
      $JC: "start";
    }

    @if $justifyContent == "flex-end" {
      $JC: "end";
    }

    @if $justifyContent == "space-between" {
      $JC: "between";
    }

    @if $justifyContent == "space-around" {
      $JC: "around";
    }

    @each $alignItems in $alignItemsList {
      // 简化一些属性值
      $AI: $alignItems;

      @if $alignItems == "flex-start" {
        $AI: "start";
      }

      @if $alignItems == "flex-end" {
        $AI: "end";
      }

      // 根据变量，组合为css代码
      @if $AI == "center" {
        .flex-#{$dir}-#{$JC} {
          display: flex;
          flex-direction: $direction;
          align-items: center;
          justify-content: $justifyContent;
        }
      } @else {
        .flex-#{$dir}-#{$JC}-#{$AI} {
          display: flex;
          flex-direction: $direction;
          align-items: $alignItems;
          justify-content: $justifyContent;
        }
      }
    }
  }
}

/* 外边距,内边距,字体,圆角 px */
@for $i from 1 through 300 {
  // $item: nth($i);
  // $title : map-get($map: $item, $key: title );
  // $num: map-get($map: $item, $key: color );
  .w-#{$i} {
    width: #{$i}px;
  }
  .ml-#{$i} {
    margin-left: #{$i}px;
  }
  .mr-#{$i} {
    margin-right: #{$i}px;
  }
  .mt-#{$i} {
    margin-top: #{$i}px;
  }
  .mb-#{$i} {
    margin-bottom: #{$i}px;
  }
  .mx-#{$i} {
    margin-right: #{$i}px;
    margin-left: #{$i}px;
  }
  .my-#{$i} {
    margin-top: #{$i}px;
    margin-bottom: #{$i}px;
  }
  .m-#{$i} {
    margin: #{$i}px;
  }

  .pl-#{$i} {
    box-sizing: border-box;
    padding-left: #{$i}px;
  }
  .pr-#{$i} {
    box-sizing: border-box;
    padding-right: #{$i}px;
  }
  .pt-#{$i} {
    box-sizing: border-box;
    padding-top: #{$i}px;
  }
  .pb-#{$i} {
    box-sizing: border-box;
    padding-bottom: #{$i}px;
  }
  .px-#{$i} {
    box-sizing: border-box;
    padding-right: #{$i}px;
    padding-left: #{$i}px;
  }
  .py-#{$i} {
    box-sizing: border-box;
    padding-top: #{$i}px;
    padding-bottom: #{$i}px;
  }
  .p-#{$i} {
    box-sizing: border-box;
    padding: #{$i}px;
  }
  .fs-#{$i} {
    font-size: #{$i}px;
  }
  .br-#{$i} {
    border-radius: #{$i}px;
  }
  .line-height-#{$i} {
    line-height: #{$i}px;
  }
}
.font-weight {
  font-weight: 600;
}
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
.text-center {
  text-align: center;
}
.df {
  display: flex;
}
.aic {
  align-items: center;
}
.re {
  position: relative;
}
.ab {
  position: absolute;
}
.jcc {
  justify-content: center;
}
.jcsb {
  justify-content: space-between;
}
.fdc {
  flex-direction: column;
}
.fn {
  flex: none;
}
.f1 {
  flex: 1;
}
.c777 {
  color: #777777;
}
.t-omit {
  overflow: hidden;
  text-overflow: ellipsis;

  /*
          单行文本显示、超出省略
          注意:在flex部分布局下使用可能会冲突
      */
  word-break: break-all;
  white-space: nowrap;

  // display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.t-omit-two {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;

  /*
          两行文本超出省略显示
          注意:在flex部分布局下使用可能会冲突
      */
  word-break: break-all;
  white-space: normal !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* clearfix */
.clearfix::after {
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
  content: "";
}

/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.2s;
}
.fade-transform-enter-from {
  opacity: 0;
  transition: all 0.2s;
  transform: translateX(-30px);
}
.fade-transform-leave-to {
  opacity: 0;
  transition: all 0.2s;
  transform: translateX(30px);
}

/* breadcrumb-transform */
.breadcrumb-enter-active {
  transition: all 0.2s;
}
.breadcrumb-enter-from,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(10px);
}

/* scroll bar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background-color: var(--el-border-color-darker);
  border-radius: 20px;
}

/* nprogress */
#nprogress .bar {
  background: var(--el-color-primary) !important;
}
#nprogress .spinner-icon {
  border-top-color: var(--el-color-primary) !important;
  border-left-color: var(--el-color-primary) !important;
}
#nprogress .peg {
  box-shadow:
    0 0 10px var(--el-color-primary),
    0 0 5px var(--el-color-primary) !important;
}
